<template>
	<view class="tabbar">
		<scroll-view scroll-x class="scroll-view">
			<view class="scroll-view-content">
				<view v-for="(item, index) in List" :key='item.name' @click="handlemy(item,index)" :class="{active:index===activeIndex}" class="scroll-view-item">
					{{item.name}}</view>
			</view>
		</scroll-view>
		<view @click="goLabel" class="tabbar_icon">
			<!-- 使用uniapp自带的icon库,需要重启才能生效 https://ext.dcloud.net.cn/plugin?id=28#rating -->
			<uni-icons type="plusempty" color='#666' size="22"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: 0,
			};
		},
		props: {
			List: {
				type: Array,
				default () {
					return []
				}
			},
			activeItem: {
				type: Number,
				default: 0,
			}
		},
		watch:{
			activeItem(newVal,oldVal){
				// console.log(newVal,oldVal);
				this.activeIndex = newVal
			}
		},
		mounted() {
			// console.log(this.List,'ListListList');
		},
		methods: {
			handlemy(item, index) {
				this.$emit('msg', item.name);
				this.$emit('changes', index);
				this.activeIndex = index;
				// console.log(item, index);
			},
			goLabel(){
				// console.log("dianjle");
				uni.navigateTo({
					url:"/pages/views/ClassifyLabel/ClassifyLabel"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		background-color: #000;
		box-sizing: border-box;
		border-bottom: 1px solid #222;
		display: flex;
		.scroll-view{
			overflow: hidden;
		}
		.scroll-view-content {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			height: 30px;

			// flex-direction: row;
			.scroll-view-item {
				flex-shrink: 0;
				padding: 0 10px;
				color: #aaa;
				font-size: 14px;
				&.active{
					color: $uni-color-warning;
				}
			}
		}

		.tabbar_icon {
			width: 45px;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			flex-shrink: 0;
			&::before {
				content: '';
				background: #222;
				position: absolute;
				left: 0;
				width: 1px;
				height: 20px;
			}
		}
	}
</style>
